<template>
  <div class="staffManage">
    <van-nav-bar title="岗位管理" left-text="" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="list">
      <div class="item" v-for="i in 10">
        <div class="content">
          <div class="right">
            <div class="info">
              <span>岗位名称：销售</span>
            </div>
            <div class="info">
              <span class="gray">职责：负责公司相关产品的上架，销售等一系列操作，负责
                负责公司相关产品的上架，销售等一系列操作，公司相关产
                品的上架，销售等一系列操作......</span>
            </div>
          </div>
        </div>
        <div class="operate">
          <div @click="edit">
            <van-button block native-type="submit" size="mini" color="#2CB9A4" plain>
              编辑
            </van-button>
          </div>
          <div @click="delet('web前端')">
            <van-button block native-type="submit" size="mini" color="#FF6666" plain>
              删除
            </van-button>
          </div>
        </div>
      </div>
    </div>
    <div class="bot">
      <div class="addStaff" @click="add">
        <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 100%)"
          size="small">
          新增岗位
        </van-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { showConfirmDialog } from 'vant';
import 'vant/es/dialog/style';
import { useRouter } from "vue-router";
const router = useRouter();
const checked = ref(true);
// 返回按钮
const onClickLeft = () => {
  router.back();
};
const edit = () => {
  router.push({
    path: '/positionAdd'
  });
};
const add = () => {
  router.push({
    path: '/positionAdd'
  });
};
const delet = (e) => {
    showConfirmDialog({
        title: '提示',
        confirmButtonColor:'#218CC9',
        message:
            `您确认删除岗位为${e}的员工吗？`,
    })
        .then(() => {
            // on confirm
        })
        .catch(() => {
            // on cancel
        });
}
</script>
<style>
:root {
  --van-switch-node-size: 0.8rem !important;
}
</style>
<style scoped lang="scss">
// ::v-deep .van-switch{
//     height: 15px !important; 
// }
.staffManage {
  height: 100vh;
  background: #F6F6F6;

  .list {
    padding: 60px 10px;

    .item {
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      padding: 10px;
      border-radius: 8px;
      background: #FFF;
      box-shadow: 0px 0px 10px 0px rgba(8, 23, 56, 0.05);

      .operate {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 10px;

        div {
          width: 25%;
          margin-left: 10px;
        }
      }

      .content {
        display: flex;
        border-bottom: 1px solid rgba(217, 217, 217, 0.60);
        padding-bottom: 10px;

        .left {
          width: 70px;

          img {
            width: 63px;
            height: 63px;
            border-radius: 5px;
          }
        }

        .right {
          flex: 1;
          display: flex;
          flex-direction: column;

          .info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2px;
            margin-top: 1px;
          }
        }

        .gray {
          color: #979797;
          font-family: PingFang SC;
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

        .blue {
          color: #2CB9A4;
          font-family: PingFang SC;
          font-size: 12px;
        }
      }

    }
  }

  .bot {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    height: 50px;
    align-items: center;
    box-shadow: 0px 0px 10px 0px rgba(8, 23, 56, 0.05);

    .addStaff {
      width: 60%;
    }

    .managePosition {
      width: 45%;
    }
  }
}</style>